<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修复注册问题</title>
    <style>
        body { 
            font-family: Arial, sans-serif; 
            padding: 20px; 
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
        }
        .container { 
            max-width: 800px; 
            margin: 0 auto; 
            background: white; 
            padding: 30px; 
            border-radius: 15px; 
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
        .step { 
            margin-bottom: 30px; 
            padding: 20px; 
            border: 1px solid #ddd; 
            border-radius: 8px; 
            background: #f8f9fa;
        }
        .step h3 { 
            color: #333; 
            margin-bottom: 15px; 
        }
        .btn { 
            padding: 10px 20px; 
            margin: 5px; 
            border: none; 
            border-radius: 5px; 
            cursor: pointer; 
            font-weight: bold;
            transition: all 0.3s ease;
        }
        .btn-primary { 
            background: #007bff; 
            color: white; 
        }
        .btn-primary:hover { 
            background: #0056b3; 
            transform: translateY(-2px);
        }
        .btn-success { 
            background: #28a745; 
            color: white; 
        }
        .btn-success:hover { 
            background: #218838; 
            transform: translateY(-2px);
        }
        .btn-danger { 
            background: #dc3545; 
            color: white; 
        }
        .btn-danger:hover { 
            background: #c82333; 
            transform: translateY(-2px);
        }
        .result { 
            margin-top: 15px; 
            padding: 15px; 
            border-radius: 8px; 
            font-weight: bold;
        }
        .success { 
            background: #d4edda; 
            color: #155724; 
            border: 1px solid #c3e6cb;
        }
        .error { 
            background: #f8d7da; 
            color: #721c24; 
            border: 1px solid #f5c6cb;
        }
        .info { 
            background: #d1ecf1; 
            color: #0c5460; 
            border: 1px solid #bee5eb;
        }
        .warning { 
            background: #fff3cd; 
            color: #856404; 
            border: 1px solid #ffeaa7;
        }
        h1 { 
            text-align: center; 
            color: #333; 
            margin-bottom: 30px; 
        }
        .code { 
            background: #f8f9fa; 
            padding: 10px; 
            border-radius: 5px; 
            font-family: monospace; 
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>🔧 注册问题修复工具</h1>
        
        <div class="step">
            <h3>步骤 1: 清空所有数据</h3>
            <p>首先清空所有用户数据，确保从干净的状态开始测试</p>
            <button class="btn btn-danger" onclick="clearAllData()">🗑️ 清空所有数据</button>
            <div id="step1Result"></div>
        </div>
        
        <div class="step">
            <h3>步骤 2: 测试注册功能</h3>
            <p>使用简化的注册测试页面验证注册功能是否正常</p>
            <button class="btn btn-primary" onclick="openTestPage()">🧪 打开注册测试页面</button>
            <div id="step2Result"></div>
        </div>
        
        <div class="step">
            <h3>步骤 3: 检查主注册页面</h3>
            <p>检查主注册页面的用户类型选择器是否正常工作</p>
            <button class="btn btn-primary" onclick="openMainAuth()">🔐 打开主注册页面</button>
            <div id="step3Result"></div>
        </div>
        
        <div class="step">
            <h3>步骤 4: 查看当前状态</h3>
            <p>查看当前系统中的用户数据和状态</p>
            <button class="btn btn-success" onclick="checkStatus()">📊 查看状态</button>
            <div id="step4Result"></div>
        </div>
        
        <div class="step">
            <h3>步骤 5: 常见问题解决</h3>
            <p>如果注册仍然有问题，请尝试以下解决方案：</p>
            <div class="warning">
                <strong>问题 1: 用户类型无法选择</strong><br>
                解决方案：刷新页面，确保JavaScript正确加载
            </div>
            <div class="warning">
                <strong>问题 2: 注册后没有反应</strong><br>
                解决方案：打开浏览器开发者工具查看控制台错误
            </div>
            <div class="warning">
                <strong>问题 3: 用户名已存在</strong><br>
                解决方案：使用不同的用户名或清空数据重新开始
            </div>
        </div>
        
        <div style="text-align: center; margin-top: 30px;">
            <a href="start.html" style="color: #007bff; text-decoration: none; font-weight: bold;">
                🏠 返回开始页面
            </a>
        </div>
    </div>

    <script>
        function clearAllData() {
            try {
                localStorage.removeItem('users');
                localStorage.removeItem('currentUser');
                document.getElementById('step1Result').innerHTML = 
                    '<div class="success">✅ 所有数据已清空！现在可以重新开始测试了。</div>';
            } catch (error) {
                document.getElementById('step1Result').innerHTML = 
                    '<div class="error">❌ 清空失败: ' + error.message + '</div>';
            }
        }
        
        function openTestPage() {
            window.open('test-registration.html', '_blank');
            document.getElementById('step2Result').innerHTML = 
                '<div class="info">📝 已打开注册测试页面，请在新窗口中测试注册功能</div>';
        }
        
        function openMainAuth() {
            window.open('simple-auth.html', '_blank');
            document.getElementById('step3Result').innerHTML = 
                '<div class="info">📝 已打开主注册页面，请测试用户类型选择器是否正常工作</div>';
        }
        
        function checkStatus() {
            try {
                const users = JSON.parse(localStorage.getItem('users') || '[]');
                const currentUser = localStorage.getItem('currentUser');
                
                let html = '<div class="info">';
                html += '📊 当前状态:<br><br>';
                html += `👥 用户数量: ${users.length}<br>`;
                html += `🔐 当前登录: ${currentUser ? '是' : '否'}<br>`;
                
                if (currentUser) {
                    const user = JSON.parse(currentUser);
                    html += `👤 登录用户: ${user.name} (${user.type})<br>`;
                }
                
                if (users.length > 0) {
                    html += '<br>📋 用户列表:<br>';
                    users.forEach((user, index) => {
                        html += `${index + 1}. ${user.username} (${user.type}) - ID: ${user.id}<br>`;
                    });
                } else {
                    html += '<br>📝 没有用户数据，可以开始注册测试';
                }
                
                html += '</div>';
                document.getElementById('step4Result').innerHTML = html;
            } catch (error) {
                document.getElementById('step4Result').innerHTML = 
                    '<div class="error">❌ 检查失败: ' + error.message + '</div>';
            }
        }
        
        // 页面加载时自动检查状态
        window.onload = function() {
            checkStatus();
        };
    </script>
</body>
</html>
